<template>
  <NavBarVue :title="'活动详情'"/>
  <view class="active_detail">
    <view class="top_box">
      <view class="h1">{{receives?.activityName}}</view>
      <view class="rate_star">
        <u-rate :value="'5'" readonly></u-rate>
        <text class="spa">{{receives?.activityTarget}}</text>
      </view>
      <view class="x_scroll">
        <scroll-view class="scroll-view_H" enable-flex scroll-x="true" @scroll="scroll" scroll-left="0">
          <view v-for="(item, key) in receives?.imgPics" :key="key"
                style="width: 320rpx;height: 240rpx;overflow: hidden;">
            <BaseCoverImage
                :src="item"
            />
          </view>
        </scroll-view>
      </view>
      <view class="operating">
        <text>营业中</text>
        <text class="date">{{formatDate(receives?.startDate)}}-{{formatDate(receives?.endDate)}}</text>
      </view>
      <view class="pos">
        <view class='pos_left'>
          <text class="iconfont icon-dingwei" style="padding-top: 5rpx;padding-right: 10rpx;"></text>
          <view class="left_top">
            <view class="">
              {{businessInfo?.businessName}}
            </view>
            <view class="left_bom">距您3.1km，需要6分钟</view>
          </view>
        </view>
        <view class='pos_right'>
          <view class="icn" v-for="(item,idx) in addressCarList" :key="idx">
            <text :class="'iconfont icon-' + item.icon"></text>
            <view class="picon">{{item.iconName}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom_box">
      <view class="shadow"></view>
      <view class="shop_image">
        <BaseCoverImage :src="receives?.imgPics[0]"/>
        <button @click="getUserReceive" v-if="origin === 'normal'">领取优惠券</button>
        <button v-else disabled style="background-color: gray;color:#fff;">已领取</button>
      </view>
      <view class="hot_title">热销活动</view>
      <view class="coupon_list" v-for="item in activity" :key="item.id">
        <view class="li_top">
          <view class="li_h2">
            {{item.title}}
          </view>
          <view class="li_p">
            <text>活动时间：</text>
            <text>{{item.times}}</text>
          </view>
        </view>
        <view class="li_con">
          <BaseCoverImage class="li_imgs" :src="item.img"/>
          <view class="con_right">
            <view class="con_p">{{item.range}}</view>
            <view class="con_p">
              <text>数量：</text>
              <text>{{item.num}}</text>
            </view>
            <view class="con_p">{{item.slogan}}</view>
          </view>
        </view>
        <view class="li_bom">
          <button class="li_btn">领取优惠券</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  computed
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app'
import {
  useActivityStore,
  useUserReceive,
  useCouponStore,
  useBusinessStore
} from '../../../../store'
import {formatDate} from '../../../../utils/formatDate'


// 收藏列表
const addressCarList = reactive([{
  icon: 'shoucang',
  iconName: '收藏'
},
  {
    icon: 'daohang',
    iconName: '导航'
  },
  {
    icon: 'xiaoqiche',
    iconName: '打车'
  }
])

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const scroll = function (e) {
  old.value.scrollTop = e.detail.scrollTop
}
const id = ref(null)
const origin = ref('')
onLoad((e) => {
  console.log('onLoad:::', e)
  id.value = e?.id
  origin.value = e?.origin
})

// 获取门店信息
const activityStore = useActivityStore()
const couponStore = useCouponStore()
const businessStore = useBusinessStore()
let receives = ref({})
let couponRes = ref({})
onMounted(async () => {
  const res = await activityStore.activityDetail(id.value)
  receives.value = res?.data
  couponRes.value = await couponStore.couponInfoDetail(res?.data?.rewardCouponId)
  await businessStore.findBusinessId(res?.data?.businessId)
})
let businessInfo = computed(() => {
  return businessStore.businessDetail.business
})
// 活动列表
const activity = [{
  img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  title: "彻夜畅玩场",
  times: "21:00-02:00",
  range: "21:00至次日06:00内",
  num: 20,
  slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
},
  {
    img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "彻夜畅玩场",
    times: "21:00-02:00",
    range: "21:00至次日06:00内",
    num: 20,
    slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
  }
]

const userReceive = useUserReceive()
// 用户领取优惠劵
const getUserReceive = async () => {
  await userReceive.userReceiveSave({
    activityId: id.value,
    couponCode: couponRes.value?.couponCode,
    couponId: receives.value?.rewardCouponId,
    receiveChannel: receives.value?.deliveryChannel,
    shopId: receives.value?.shopIds,
    userId: uni.getStorageSync('item')?.userId
  })
  uni.showToast({
    title: '领取优惠券成功'
  })
}
</script>

<style lang="scss">
.active_detail {
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
  background-color: #F8F8F8;
}

.top_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .h1 {
    font-weight: 600;
    font-size: 50rpx;
    color: #222222;
    line-height: 55rpx;
    text-align: justify;
    font-style: normal;
  }

  .rate_star {
    display: flex;
    align-items: center;

    .spa {
      margin-left: 10px;
    }
  }

  .x_scroll {
    margin-top: 20rpx;

    .scroll-Y {
      height: 300rpx;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      height: 240rpx;
      margin: 10rpx 0rpx;
      display: flex;
      flex-direction: row;
    }

    .scroll-view_H view {
      flex-shrink: 0;
    }

    .scroll-view-item {
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }

    .scroll-view-item_H {
      display: inline-block;
      width: 100%;
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }

    .demo {
      width: 320rpx;
      height: 240rpx;
      margin-right: 8rpx;
      border-radius: 20rpx;
    }
  }

  .operating {
    font-size: 24rpx;
    position: relative;
    margin-top: 15rpx;

    .iconfont {
      font-size: 38rpx;
    }

    .date {
      padding-left: 8rpx;
    }
  }

  .operating::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #b2b2b2;
    position: absolute;
    bottom: -20rpx;
    transform: translateY(-50%);
  }

  .pos {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .pos_left {
      display: flex;

      .left_top {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .left_bom {
        color: #9C9C9C;
      }
    }

    .pos_right {
      display: flex;

      .icn {
        text-align: center;
        padding: 0rpx 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20rpx;

        .picon {
          font-size: 20rpx;
          margin-top: 8rpx;
        }
      }
    }
  }
}

.bottom_box {
  flex: 1;
  display: flex;
  flex-direction: column;

  .shadow {
    width: 100%;
    height: 16rpx;
  }

  .shop_image {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
  }

  .shop_image button {
    margin-top: 30rpx;
    background-color: #FF4D65;
    color: #fff;
    font-size: 32rpx;
  }

  .hot_title {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 30rpx;
    font-size: 32rpx;
    color: #222222;
  }

  .coupon_list {
    background-color: white;
    color: #9C9C9C;
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .li_top {
      display: flex;
      justify-content: space-between;
      margin-left: 20rpx;
      margin-top: 30rpx;
      margin-right: 60rpx;

      .li_h2 {
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }

      .li_p {
        font-size: 26rpx;
      }
    }

    .li_con {
      display: flex;
      justify-content: flex-start;
      margin-left: 20rpx;
      margin-top: 30rpx;

      .li_imgs {
        width: 112rpx;
        height: 112rpx;
        border-radius: 10px;
      }

      .con_right {
        margin-left: 30rpx;
        font-size: 24rpx;

        .con_p {
          padding: 2rpx 0rpx;
        }
      }
    }

    .li_bom {
      flex: 1;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}

.li_btn {
  float: right;
  width: 168rpx;
  height: 64rpx;
  padding: 0rpx;
  margin: 0rpx;
  font-size: 24rpx;
  border-radius: 70rpx;
  line-height: 64rpx;
  color: white;
  background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
}
</style>